<template>
	<view>
		<!-- @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"-->
		<cu-custom style="background-color: #231140;" class="bg-gradual-purple" :isBack="false">
			<block slot="content">小密书</block>
		</cu-custom>

		<!-- data-search -->
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="search" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入应用名称"
				 confirm-type="search"></input>
			</view>
			<view class="action">
				<button @click="searchData" class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>

		<!-- data-list -->
		<!-- style="background-image: url('https://y19y.gitee.io/learning_notes/cg.jpg');background-size: cover; -moz-background-size: cover; "
		 class="bg-img" -->
		<view>

			<view class="data-list" v-show="!showFingerModal" style="width: 100%;">

				<view @longpress="showDel" :data-index="iteam.id" class="margin-lr-sm margin-bottom-xl text-center   shadow-blur bg-gradual-purple radius" v-for="(iteam,index) in dataList"
				 :key='index' :style="[{animationDelay: (index + 1)*0.19 + 's'}]" :class="'animation-'+ animations[(index%4)]">
					<view class=" flex margin-bottom-sm solids-bottom " :class="animation=='shake'+index?'animation-' +'shake' :''"
					 :data-class="'shake'+index" :data-index="index" @tap="Toggle">
						<view class="flex-sub text-center text-xxl padding-sm margin-xl grid col-1">
							<view><text>{{iteam!=null? iteam.user.length>10?iteam.user.substring(0,10)+'...':iteam.user : ''}}</text></view>
							<view><text>{{iteam!=null? iteam.pasd.length>10?iteam.pasd.substring(0,10)+'...':iteam.pasd : ''}}</text></view>
						</view>
						<view class="flex-sub text-xsl  text-center margin-xs radius "><text>{{iteam.apply.substring(0,8)}}</text></view>
					</view>
					<view class="flex padding-tb-sm">
						<view class="flex-sub margin-lr-sm"><button @tap="copyByNum(1,iteam)" class="cu-btn round block line-white lg ">
								<text class="cuIcon-upload"></text> 合并复制</button></view>
						<view class="flex-sub margin-lr-sm"><button @tap="copyByNum(3,iteam)" class="cu-btn round block line-white lg">
								<text class="cuIcon-upload"></text> 逐条复制</button></view>
						<view class="flex-sub margin-lr-sm"><button @tap="goUp" :data-index="index" class="cu-btn round block line-white lg">
								<text class="cuIcon-upload"></text> 更改</button></view>
					</view>
				</view>
			</view>
		</view>



		<!-- 悬浮fab -->
		<uni-fab v-if='!showStatisticsModal' :pattern="fabPattern" :content="fabContent" :horizontal="fabHorizontal"
		 :vertical="fabVertical" :direction="fabDirection" @trigger="fabTrigger"></uni-fab>

		<!-- 指纹-->
		<view class="cu-modal" :class="showFingerModal">
			<view class="cu-dialog">
				<view style="background: #231140;" class="cu-bar bg-white justify-end">
					<view class="content">请验证指纹</view>
					<view class="action" @tap="hideFingerModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="background: #231140;">
					<view class="wrapper">
						<view class="orbit-container">
							<view class="orbit-center"></view>
							<view class="orbit-layer layer-one"></view>
							<view class="orbit-layer layer-two"></view>
							<view class="orbit-layer layer-three"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- add-->
		<view class="cu-modal" :class="showAddModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">录入账号</view>
					<view class="action" @tap="hideAddModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">应用</view>
							<input v-model="addData.apply" placeholder="请输入应用名称" name="apply"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">账号</view>
							<input v-model="addData.user" placeholder="请输入账号" name="user"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">密码</view>
							<input v-model="addData.pasd" placeholder="请输入密码" name="pasd"></input>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideAddModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="add">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- del -->
		<view class="cu-modal" :class="showDelModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">系统提示</view>
					<view class="action" @tap="hideDelModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确认删除
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideDelModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="del">确定</button>
		
					</view>
				</view>
			</view>
		</view>

		<!-- show -->
		<view class="cu-modal" :class="showDataModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content"></view>
					<view class="action" @tap="hideDataModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">应用</view>
							<input @tap="copy(currentData.apply)" disabled v-model="currentData.apply" placeholder="apply" name="apply"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">账号</view>
							<input @tap="copy(currentData.user)" disabled v-model="currentData.user" placeholder="user" name="user"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">密码</view>
							<input @tap="copy(currentData.pasd)" disabled v-model="currentData.pasd" placeholder="pasd" name="pasd"></input>
						</view>
					</form>
				</view>
			</view>
		</view>
		
		<!-- set -->
		<view class="cu-modal" :class="showSetModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">系统设置</view>
					<view class="action" @tap="showSetModal = ''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<form>
					<view class="padding-xl margin-top">
						<view class="title">是否开启指纹验证</view>
						<switch @change="setset" :class="set?'checked':''" :checked="set?true:false"></switch>
					</view>
				</form>
			</view>
		</view>


	</view>
</template>

<script>
	import cuCustom from '../../colorui/components/cu-custom.vue'
	import uniFab from '../../component/uni-fab/uni-fab.vue'
	import * as util from '../../js/utils.js'

	export default {

		data() {


			return {
				/* color-ui */
				InputBottom: 0,
				listTouchStart: 0,
				listTouchDirection: null,
				animation: '',


				/* app use data */
				search: '',
				addData: {
					apply: '',
					user: '',
					pasd: '',
				},
				currentData: {
					apply: '',
					user: '',
					pasd: '',
				},
				animations: [
					'slide-top',
					'slide-left',
					'slide-right',
					'slide-bottom'
				],
				dataList: [],
				set: false,


				/* modal */
				showAddModal: '',
				showDataModal: '',
				showStatisticsModal: '',
				showDataListModal: '',
				showFingerModal: 'show',
				showDelModal: '',
				showSetModal: '',


				/* Fab */
				fabPattern: {
					color: '#000000',
					backgroundColor: '#fff',
					selectedColor: '#000000',
					buttonColor: '#aaff00'
				},
				fabContent: [{
						iconPath: '/static/add.jpg',
						selectedIconPath: '',
						text: '添加',
						active: false,
						tag: 'add',
					},
					{
						iconPath: '/static/set.jpg',
						selectedIconPath: '',
						text: '设置',
						active: false,
						tag: 'set',
					},
					{
						iconPath: '/static/statistic.jpg',
						selectedIconPath: '',
						text: '统计',
						active: false,
						tag: 'statistics',
					},
				],
				fabHorizontal: 'right',
				fabVertical: 'bottom',
				fabDirection: 'vertical',
				fabPopMenu: true,

			}
		},
		onLoad() {

		},
		methods: {
			setset(e) {
				let _this = this
				let set = e.detail.value
				if(set)
				{
					if(plus.fingerprint.isSupport()) {
						if(plus.fingerprint.isEnrolledFingerprints()) {
							_this.set = set
							util.uploadLocalStorage('set',set)
							plus.nativeUI.toast("开启成功");
						}else {
							plus.nativeUI.confirm("未录入指纹，开启失败", function(e){
									
								});
						}
					}else {
						plus.nativeUI.confirm("系统不支持指纹识别，开启失败", function(e){
								
							});
					}
				}
				else{
					this.set = set
					util.uploadLocalStorage('set',set)
				}
				
				
			},
			//search input 
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				let spaceBetween = e.touches[0].pageX - this.listTouchStart
				this.listTouchDirection = spaceBetween > 71 ? 'right' : spaceBetween < -71 ? 'left' : 'none'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'right') {
					console.log("in add interface");
					this.showStatisticsModal = 'show'
					this.showDataListModal = 'show'
				} else if (this.listTouchDirection == 'left') {

				}
				this.listTouchStart = 0
				this.listTouchDirection = null
			},
			Toggle(e) {
				var anmiaton = e.currentTarget.dataset.class;
				this.animation = anmiaton;
				this.currentData = this.dataList[e.currentTarget.dataset.index];
				setTimeout(() => {
					this.animation = '';
				}, 1000)
				this.showDataModal = 'show'
			},


			//search
			searchData() {
				let dataList = util.getLocalStorage("data-list")
				const search = this.search
				dataList = dataList.filter(e => e.apply.indexOf(search) != -1 )
				this.dataList = dataList
			},

			//hideAddModal
			hideStatisticsModal() {
				this.showStatisticsModal = ''
				this.showDataListModal = ''
			},

			//echarts
			onViewClick(options) {
				console.log(options)
			},

			//fab
			fabTrigger(e) {
				console.log(e)
				switch (e.item.tag) {
					case 'add':
						this.showAddModal = 'show'
						break;

					case 'set':
						this.showSetModal = 'show'
						break;
						
					case 'statistics':
						uni.navigateTo({
						    url: '../statistics/statistics'
						});
					break;

				}
			},
			hideFingerModal() {
				this.showFingerModal = ''
				 plus.runtime.quit();
			},
			hideAddModal() {
				this.showAddModal = ''
			},
			hideDataModal() {
				this.showDataModal = ''
			},
			add() {
				let dataList = util.getLocalStorage("data-list")
				if (!dataList) {
					dataList = []
				}
				
				if(this.addData.id)
				{
					let deli = dataList.findIndex(e=> e.id == this.addData.id);
					if(deli !=-1)
					{
						dataList.splice(deli,1);
						util.uploadLocalStorage("data-list",dataList);
					}
				}
				dataList = util.getLocalStorage("data-list")
				if (!dataList) {
					dataList = []
				}
				let data = this.addData
				data.id = data.apply + "-" + new Date().getTime()
				data.pasd = util.encryptDes(data.pasd, 'nznb' + data.id + 'jjw')
				dataList.push(data)
				util.uploadLocalStorage('data-list', dataList)
				this.addData = {
					user: '',
					pasd: '',
					apply: '',
				}
				this.showAddModal = ''
				this.getDataList()
			},
			showDel(e) {
				const delIndex = e.currentTarget.dataset.index
				this.showDelModal = 'show'
				this.delIndex = delIndex
			},
			del() {
				let dataList = util.getLocalStorage('data-list');
				const delIndex = this.delIndex
				let deli = dataList.findIndex(e=> e.id == delIndex);
				if(deli !=-1)
				{
					dataList.splice(deli,1);
					util.uploadLocalStorage("data-list",dataList);
				}
				this.getDataList()
				this.showDelModal = ''
			},
			hideDelModal() {
				this.showDelModal = ''
			},
			goUp(e) {
				this.addData = this.dataList[e.currentTarget.dataset.index]
				this.showAddModal = 'show'
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: function() {
						plus.nativeUI.toast("复制成功");
					}
				});
			},
			copyByNum(e,data) {
				switch(e)
				{
					case 1:
						uni.setClipboardData({
							data:  '账号:' + data.user + '\n' + '密码:' + data.pasd,
							success: function() {
							}
						});
					break;
					
					case 2:
					
					break;
					
					case 3:
						uni.setClipboardData({
							data: data.user,
							success: function() {
							}
						});
						uni.setClipboardData({
							data: data.pasd,
							success: function() {
							}
						});
					break;
				}
			},
			getDataList() {
				let dataList = util.getLocalStorage("data-list");
				if (!dataList) {
					dataList = []
				}
				for (let [k, v] of dataList.entries()) {
					v.pasd = util.decryptDes(v.pasd, 'nznb' + v.id + 'jjw')
				}
				this.dataList = dataList
			},
		},
		components: {
			'cu-custom': cuCustom,
			'uni-fab': uniFab,
		},
		mounted() {
			plus.runtime.setBadgeNumber(19, {
				title:'小密书有话对你说',
				content:'赶快添加些数据吧'
			});
			this.getDataList()
			let set = util.getLocalStorage('set');
			if(!set)
			{
				this.set = false
				util.uploadLocalStorage('set',false)
			}
			this.set = set
			this.showFingerModal = set?'show':''
			let _this = this
			if(set)
			{
				var waiting = null;
				plus.fingerprint.authenticate(function(){
						plus.nativeUI.closeWaiting();//兼容Android平台关闭等待框
						_this.showFingerModal = ''
					}, function(e){
						switch(e.code) {
						case e.AUTHENTICATE_MISMATCH:
						plus.nativeUI.toast('指纹匹配失败，请重新输入');
						break;
						case e.AUTHENTICATE_OVERLIMIT:
						plus.nativeUI.closeWaiting();//兼容Android平台关闭等待框
						plus.nativeUI.alert('指纹识别失败次数超出限制');
						break;
						default:
						plus.nativeUI.closeWaiting();//兼容Android平台关闭等待框
						plus.nativeUI.alert('指纹系统错乱,请重新进入应用');
						 plus.runtime.quit();
						break;
						}
					});
					// Android平台弹出等待提示框 
					if('Android'==plus.os.name) {
						// plus.nativeUI.showWaiting('指纹识别中...');
					}
			}
		},
	}
</script>


<style>
	@import "../../colorui/animation.css";

	/* 指纹 */
	.wrapper {
		width: 175px;
		height: 175px;
		margin: 20px auto;
	}

	.orbit-container {
		position: relative;
		width: 175px;
		height: 175px;
	}

	.orbit-center {
		width: 60px;
		height: 60px;
		border: 2px solid #C0C4FF;
		border-radius: 200px;
		box-shadow: 0 0 4px 2px #dadcff;
		background-image: url(../../static/fingerprint-color.svg);
		background-size: 40px;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -30px;
		margin-left: -30px;
		animation: shadow-pulse 4s infinite;
	}

	.orbit-layer {
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 500px;
		border-width: 2px;
		border-style: solid;
		animation-name: orbit-rotation;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.layer-one {
		width: 100px;
		height: 100px;
		margin-top: -50px;
		margin-left: -50px;
		border-top-color: #ff307f;
		border-left-color: rgba(255, 48, 127, 0.5);
		border-right-color: rgba(255, 48, 127, 0.5);
		border-bottom-color: rgba(255, 48, 127, 0.5);
		box-shadow: 0 0 3px 2px rgba(255, 48, 127, 0.3);
		animation-duration: 1s;
	}

	.layer-two {
		width: 140px;
		height: 140px;
		margin-top: -70px;
		margin-left: -70px;
		border-top-color: #36f1cd;
		border-left-color: rgba(54, 241, 205, 0.5);
		border-right-color: rgba(54, 241, 205, 0.5);
		border-bottom-color: rgba(54, 241, 205, 0.5);
		box-shadow: 0 0 3px 2px rgba(54, 241, 205, 0.3);
		animation-duration: 1.5s;
	}

	.layer-three {
		width: 180px;
		height: 180px;
		margin-top: -90px;
		margin-left: -90px;
		border-top-color: #4dc1ea;
		border-left-color: rgba(77, 193, 234, 0.5);
		border-right-color: rgba(77, 193, 234, 0.5);
		border-bottom-color: rgba(77, 193, 234, 0.5);
		box-shadow: 0 0 3px 2px rgba(77, 193, 234, 0.3);
		animation-duration: 2s;
	}

	@keyframes orbit-rotation {
		0% {
			transform: rotate(0);
		}

		40% {
			transform: rotate(200deg);
		}

		70% {
			transform: rotate(280deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes shadow-pulse {
		0% {
			box-shadow: 0 0 4px 2px #dadcff;
		}

		50% {
			box-shadow: 0 0 0 0 #dadcff;
		}

		100% {
			box-shadow: 0 0 4px 2px #dadcff;
		}
	}






	
</style>
